<template>
    <div>
       <div>价格:{{ price }}</div>
       <div>
         <button @click="changeNum('-')">-</button>
          数量:{{ num }}
          <button @click="changeNum('+')">+</button>
      </div>
       <div>
          总价:{{ total}}
          <button @click="changeTotal(100)">更改总价</button>
      </div>
    </div>
</template>
<!-- 
   组合式API的计算属性的实现步骤
   1、导入computed函数
   2、定义响应式的数据
   3、调用computed函数完成定义计算属性
   语法:
   3.1、简写形式的语法
   let 计算属性变量名=computed(()=>{
      return 计算属性的结果
   })
 -->
<script lang='ts' setup>
   import {computed,ref} from 'vue'
   //定义响应式数据
   let price=ref<number>(23)
   let num=ref<number>(1)
   //计算属性的简写形式
   //let total=computed(()=>price.value*num.value)
   let total=computed({
      set(arg){
         num.value=parseInt(arg as number/price.value+"")
      },
      get(){
         return price.value*num.value
      }
   })
   //定义方法
   const changeNum=(arg:string)=>{
      switch(arg){
         case '+':
            return num.value++
         case '-':
            return num.value--
      }
   }
   const changeTotal=(arg:number)=>{
      total.value=arg
   }

</script>

<style lang='scss' scoped>
</style>